<template>
  <div>
    <!--店铺卡片-->
    <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="text">{{ restaurant.restaurantName }}</span>
        <el-button type="warning" @click="onClickUpdate">修改信息</el-button>
      </div>
      <el-row>
        <el-col :span="4">
          <div>
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
          </div>
        </el-col>
        <el-col :span="20">
          <div class="bottom clearfix">
            <span class="el-textarea">{{ restaurant.description }}</span>

            <el-form :model="restaurant" status-icon label-width="100px" class="demo-ruleForm">
              <el-form-item label="地址:" prop="address">
                <span v-text="restaurant.address"></span>
              </el-form-item>
              <el-form-item label="餐盒费用:" prop="boxCost">
                <span v-text="restaurant.boxCost"></span>
              </el-form-item>
              <el-form-item label="联系人:" prop="ownerName">
                <span v-text="restaurant.ownerName"></span>
              </el-form-item>
              <el-form-item label="联系邮箱:" prop="email">
                <span v-text="restaurant.email"></span>
              </el-form-item>
              <el-form-item label="联系电话:" prop="mobile">
                <span v-text="restaurant.mobile"></span>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog
      title="修改店铺信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form label-position="left" label-width="100px" class="demo-ruleForm">
        <el-form-item label="店名">
          <el-input v-model="updateRest.restaurantName" value=""></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="updateRest.description" value=""></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-input v-model="updateRest.restaurantImg" value=""></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="updateRest.address" value=""></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="updateRest.mobile" value=""></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱">
          <el-input v-model="updateRest.email" value=""></el-input>
        </el-form-item>
        <el-form-item label="餐盒包装费用">
          <el-input v-model="updateRest.boxCost" value=""></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="cancle">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
    import RestaurantCard from "../../components/restaurant/RestaurantCard";
    export default {
        name: "MyRestaurant",
      components: {RestaurantCard},
      inject: ['reload'],
      data() {
        return {
          restaurant:{},
          updateRest:{
            id: null,
            restaurantName: '',
            description: '',
            restaurantImg: '',
            address: '',
            mobile: '',
            email: '',
            boxCost: null
          },

          dialogVisible: false,
        }
      },
      created() {
          this.$axios({
            method: "get",
            url: "/rest/myrest",
            params: {
              uid: this.$store.getters.uid
            }
          })
            .then(response => {
              if (response.data.success) {
                this.restaurant=response.data.my_rest;
                // return response.data.my_rest_list;
              }
              console.log(response.data.message);
            })
            .catch(error => console.log(error));
      },
      computed: {

      },
      methods: {
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        onClickUpdate () {
          this.dialogVisible=true;
          this.updateRest.id=this.restaurant.id;
          this.updateRest.restaurantName=this.restaurant.restaurantName;
          this.updateRest.description=this.restaurant.description;
          this.updateRest.restaurantImg=this.restaurant.restaurantImg;
          this.updateRest.address=this.restaurant.address;
          this.updateRest.mobile=this.restaurant.mobile;
          this.updateRest.email=this.restaurant.email;
          this.updateRest.boxCost=this.restaurant.boxCost;
        },
        //提交订单信息给后台
        submitForm() {
          console.log('submit update MyRestaurant!');
          this.$axios({
            method: "post",
            url: "/rest/update",
            data: {
              id: this.updateRest.id,
              restaurantName: this.updateRest.restaurantName,
              description: this.updateRest.description,
              restaurantImg: this.updateRest.restaurantImg,
              address: this.updateRest.address,
              mobile: this.updateRest.mobile,
              email: this.updateRest.email,
              boxCost: this.updateRest.boxCost
            }
          })
            .then(response => {
              console.log(response.data.message);
              this.reload();
            })
            .catch(error => console.log(error));
        },
        cancle() {
          console.log('reset');
          this.dialogVisible=false;
        }
      }
    }
</script>

<style scoped>

</style>
